
import React from 'react'

import "./UserCard.scss"
import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';

const { Meta } = Card;

export default function UserCard() {
  const user = useSelector(state=>state.user);
  return (
    <div className='UserCard-container'>
      <Card
        style={{ width: 300 }}
        cover={
          <img
            alt="背景图"
            src={user.backgroundURL}
          />
        }
        actions={[
          <SettingOutlined key="setting" />,
          <EditOutlined key="edit" />,
          <EllipsisOutlined key="ellipsis" />,
        ]}
      >
        <Meta
          avatar={<Avatar src={user.url} />}
          title={user.name}
          description={user.description}
        />
      </Card>
    </div>
  )
}
